<!doctype html>
<html lang="en" class="login-content" data-ng-app="materialAdmin">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Material Admin</title>
  <!--
  	作者：561568157@qq.com
  	时间：2016-01-07
  	描述：ICO
  -->
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  <!-- Vendor CSS -->
  <link href="/login/css/material-design-iconic-font/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css">
  <!-- CSS -->
  <link href="/login/css/app.min.1.css" rel="stylesheet" type="text/css">
	 <link href="/js/xtiper/css/xtiper.css" rel="stylesheet" type="text/css"/>
 </head>
 <body class="login-content" data-ng-controller="loginCtrl as lctrl">
 <span id="vuebox">
	 <!--登录-->
 <div class="lc-block" id="l-login" data-ng-class="{'toggled':lctrl.login === 1}">
	 <h1 class="lean">登录</h1>

	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
    			<i class="zmdi zmdi-account"></i>
    		</span>
		 <div class="fg-line">
			 <input type="text" class="form-control" v-model="user.username" placeholder="请输入您的登录账号" onblur="this.placeholder='用户名最小长度为3，最长为16！'" regex="^\w{3,16}$"/>
		 </div>
	 </div>

	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
    			<i class="zmdi zmdi-male"></i>
    		</span>
		 <div class="fg-line">
			 <input type="password" class="form-control" v-model="user.password" placeholder="请输入您的登录密码" regex="^\w+"/>
		 </div>
	 </div>

	 <div class="clearfix"></div>
	 <!--记住密码-->
	 <!--<div class="checkbox">
		 <label><input type="checkbox" value="" /><i class="input-helper">保持登录状态</i></label>
	 </div>-->
	 <!--登录按钮-->
	 <button  @click="login()" class="btn btn-login btn-danger btn-float">
		 <i class="zmdi zmdi-arrow-forward"></i>
	 </button>

	 <ul class="login-navigation">
		 <li class="bgm-red" @click="clearuser()" data-ng-click="lctrl.login = 0; lctrl.register = 1">注册</li>
		 <li data-block="#l-forget-password" @click="clearuser()" class="bgm-orange" data-ng-click="lctrl.login = 0; lctrl.forgot = 1">忘记密码?</li>
	 </ul>
 </div>
	 <!--注册-->
 <div class="lc-block" id="l-register" data-ng-class="{'toggled':lctrl.register === 1}" >
	 <h1 class="lean">注册</h1>
	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
    			<i class="zmdi zmdi-account"></i>
    		</span>
		 <div class="fg-line">
			 <input type="text" class="form-control" id="username" v-model="user.username" placeholder="请输入您的登录账号" onblur="this.placeholder='用户名最小长度为3，最长为16！'" regex="^\w{3,16}$"/>
		 </div>
	 </div>

	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
    			<i class="zmdi zmdi-email"></i>
    		</span>
		 <div class="fg-line">
			 <input type="email" class="form-control" v-model="user.email" placeholder="请输入邮箱" regex="^\w+@\w+\.[a-zA-Z]+(\.[a-zA-Z]+)?$"/>
		 </div>
	 </div>

	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
    			<i class="zmdi zmdi-male"></i>
    		</span>
		 <div class="fg-line">
			 <input type="password" class="form-control" v-model="user.password" placeholder="请输入您的登录密码" regex="^\w+"/>
		 </div>
	 </div>

	 <div class="clearfix"></div>

	 <div class="checkbox">
		 <label>
			 <input type="checkbox" v-model="yhxy" value=""/>
			 <i class="input-helper"></i>
			 接受许可协议
		 </label>
	 </div>

	 <!--登录按钮-->
	 <button  @click="register()" class="btn btn-login btn-danger btn-float">
		 <i class="zmdi zmdi-arrow-forward"></i>
	 </button>

	 <ul class="login-navigation">
		 <li data-block="#l-login" @click="clearuser()" class="bgm-green" data-ng-click="lctrl.register = 0; lctrl.login = 1">登入</li>
		 <li data-block="#l-forget-password" @click="clearuser()" class="bgm-orange" data-ng-click="lctrl.register = 0; lctrl.forgot = 1">忘记密码?</li>
	 </ul>
 </div>
	 <!--邮箱找回密码-->
 <div class="lc-block" id="l-forget-password" data-ng-class="{ 'toggled': lctrl.forgot === 1 }" data-ng-if="lctrl.forgot === 1">
	 <h1 class="lean">Azrael</h1>
	 <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu risus. Curabitur commodo lorem fringilla enim feugiat commodo sed ac lacus.</p>
	 <div class="input-group m-b-20">
		 <span class="input-group-addon"><i class="zmdi zmdi-email"></i></span>
		 <div class="fg-line">
			 <input type="text" class="form-control" placeholder="Email Address" regex="^\w+@\w+\.[a-zA-Z]+(\.[a-zA-Z]+)?$"/>
		 </div>
	 </div>

	 <a href="" class="btn btn-login btn-danger btn-float"><i class="zmdi zmdi-arrow-forward"></i></a>

	 <ul class="login-navigation">
		 <li data-block="#l-login" @click="clearuser()" class="bgm-green" data-ng-click="lctrl.forgot = 0; lctrl.login = 1">登入</li>
		 <li data-block="#l-register" @click="clearuser()" class="bgm-red" data-ng-click="lctrl.forgot = 0; lctrl.register = 1">注册</li>
	 </ul>
 </div>
 </span>
 </body>
 <script src="/login/js/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="/login/js/log.js"></script>
 <!-- Angular -->
 <script src="/login/js/bower_components/angular/angular.min.js"></script>
 <script src="/login/js/bower_components/angular-resource/angular-resource.min.js"></script>
 <script src="/login/js/bower_components/angular-animate/angular-animate.min.js"></script>
 <!-- Angular Modules -->
 <script src="/login/js/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
 <script src="/login/js/bower_components/angular-loading-bar/src/loading-bar.js"></script>
 <script src="/login/js/bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
 <script src="/login/js/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
 <!-- Common js -->
 <script src="/login/js/bower_components/angular-nouislider/src/nouislider.min.js"></script>
 <script src="/login/js/bower_components/ng-table/dist/ng-table.min.js"></script>
 <!-- Placeholder for IE9 -->
 <!--[if IE 9 ]>
 <script src="/login/js/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
 <![endif]-->
 <!-- App level -->
 <script src="/login/js/app.js"></script>
 <script src="/login/js/controllers/main.js"></script>
 <script src="/login/js/controllers/ui-bootstrap.js"></script>
 <!-- Template Modules -->
 <script src="/login/js/modules/form.js"></script>
 <script src="/js/xtiper/js/xtiper.js"></script>
 <script src="/webjars/vue/2.6.10/dist/vue.js"></script>
 <script src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
 <script type="text/javascript">
	 var vm1=new Vue({
		 el:"#vuebox",
		 data:{
			 //用户登录实体
			 user:{username:"",password:"",email:""},
			 //确认用户协议
			 yhxy:false,
		 },
		 mounted(){

		 },
		 methods:{
			 //清除用户内容
			 clearuser:function () {
				 //用户登录实体
				 this.user={username:"",password:"",email:""}
			 },
			 //登录
			 login:function () {
				 if(this.user.username.length<=2){
					 xtip.msg('请输入用户名!',{icon:'e',type:'b'});
					 return false;
				 }
				 if(this.user.password.length<=2){
					 xtip.msg('请输入密码!',{icon:'e',type:'b'});
					 return false;
				 }
				 //开始显示动画
				 loadid=xtip.load('正在验证中~',{times:2});
				 axios({
					 url:"/user/login",method:"post",
					 params:{username:this.user.username,password:this.user.password}
				 }).then(res=>{
					 setTimeout(function(){
						 //停止显示动画
						 xtip.close(loadid);
						 if(res.data.data!=null){
							 xtip.msg('登录成功!',{times:2,icon:'s',type:'b'})
							 window.location.href='/go/index?userid='+res.data.data.userid;
						 }else{
							 xtip.msg('登录失败，用户名或密码错误!',{times:2,icon:'e',type:'b'})
						 }
					 }, 1900);

				 })


			 },
			 //注册
			 register:function () {
				 if(this.user.username.length<=2){
					 xtip.msg('用户名长度最少为3!',{icon:'e',type:'b'});
					 return false;
				 }
				 var pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
						 str = '';
				 console.log(pattern.test(str));
				 if(pattern.test(this.user.email)==false){
					 xtip.msg('邮箱格式不正确! xxxxx@xxx.xxx!',{icon:'e',type:'b'});
					 return false;
				 }
				 if(this.user.password.length<=2){
					 xtip.msg('密码长度最少为3!',{icon:'e',type:'b'});
					 return false;
				 }

				 if(this.yhxy==false){
					 xtip.msg('请勾选许可协议!',{icon:'e',type:'b'});
					 return false;
				 }

				 axios({
					 url:"/user/register",method:"post",
					 params:{username:this.user.username,password:this.user.password,email:this.user.email}
				 }).then(res=>{
				     if(res.data.data==1){
                         xtip.msg('注册成功!',{times:2,icon:'s',type:'b'})
						 window.location.href='/go/index?userid='+res.data.userid;
                     }
				 })

			 }
		 }

	 })
 </script>
</html>